<template>
<div class="ChartTab">
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane :label="MonitorTypeId === 3 || MonitorTypeId === 4 ? '监测点变形分析' : '变化趋势'" name="1">
     <div class="content">
       <div class="search">
         <el-form :inline="true" :model="formInline" class="demo-form-inline">

           <!-- 开始时间 -->
           <el-form-item label="开始时间" class="margin-margin-margin-left">
             <el-date-picker
                 v-model="formInline.startTime"
                 size="mini"
                 type="date"
                 placeholder="选择日期"
                 value-format="yyyy-MM-dd HH:mm:ss">
             </el-date-picker>
           </el-form-item>

           <!-- 结束时间 -->
           <el-form-item label="结束时间" class="margin-margin-margin-left">
             <el-date-picker
                 v-model="formInline.endTime"
                 size="mini"
                 type="date"
                 placeholder="选择日期"
                 value-format="yyyy-MM-dd HH:mm:ss">
             </el-date-picker>
           </el-form-item>

           <!-- 时间类型 -->
           <el-form-item label="时间类型" v-if="MonitorTypeId === 3 || MonitorTypeId === 4 || MonitorTypeId === 6">
             <el-select v-model="formInline.timeType" clearable placeholder="请选择" size="mini">
               <el-option
                   v-for="item in timeTypeList"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value">
               </el-option>
             </el-select>
           </el-form-item>

           <!-- 查询按钮 -->
           <el-form-item>
             <el-button class="sub" type="primary" size="mini" @click="onSubmit">查询</el-button>
           </el-form-item>
         </el-form>
       </div>
       <div  class="echarts" >
<!--         <EchartsLine class="echarts-line" :recive-data="lineData" />-->
         <TwiceLine v-if="activeName === '1' && visible" :key="MonitorCode" class="echarts-line" :MonitorTypeId="MonitorTypeId" :data="dataLine" :firstLevel="firstLevel" :secondLevel="secondLevel" :thirdLevel="thirdLevel" />
       </div>
     </div>
    </el-tab-pane>

    <el-tab-pane v-if="MonitorTypeId === 3 || MonitorTypeId === 4" label="监测点变形速率分析" name="2">
      <div class="content">
        <div class="search">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">

            <!-- 开始时间 -->
            <el-form-item label="开始时间" class="margin-margin-margin-left">
              <el-date-picker
                  v-model="formInline.startTime"
                  size="mini"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择日期">
              </el-date-picker>
            </el-form-item>

            <!-- 结束时间 -->
            <el-form-item label="结束时间" class="margin-margin-margin-left">
              <el-date-picker
                  v-model="formInline.endTime"
                  size="mini"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择日期">
              </el-date-picker>
            </el-form-item>

            <!-- 时间类型 -->
            <el-form-item label="时间类型" v-if="MonitorTypeId === 3 || MonitorTypeId === 4 || MonitorTypeId === 6">
              <el-select v-model="formInline.timeType" clearable placeholder="请选择" size="mini">
                <el-option
                    v-for="item in timeTypeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>

            <!-- 查询按钮 -->
            <el-form-item>
              <el-button class="sub" type="primary" size="mini" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div  class="echarts">
          <TwiceLine2 v-if="activeName === '2' && visible" :key="MonitorCode" class="echarts-line" :MonitorTypeId="MonitorTypeId" :data="dataLine" :firstLevel="firstLevel" :secondLevel="secondLevel" :thirdLevel="thirdLevel" />
        </div>
      </div>
    </el-tab-pane>
  </el-tabs>
</div>
</template>

<script>
import EchartsLine from "./Chaets/EchartsLine";
import TwiceLine from "./Chaets/TwiceLine";
import TwiceLine2 from "./Chaets/TwiceLine2";
import { getMonitorDataResponseGpList } from "../../../../../api/api";
import moment from "moment";

export default {
  name: "ChartTab",

  components:{
    EchartsLine,
    TwiceLine,
    TwiceLine2,
  },

  props:{
    visible: Boolean,
    viewType: {
      type: String,
      default() {
        return "北斗"
      }
    },
    MonitorCode: [String, Number],
    MonitorTypeId: [String, Number],
  },

  data() {
    return {
      activeName: '1',
      timeTypeList: [
        { value: "1h", label: "1h" },
        { value: "2h", label: "2h" },
        { value: "6h", label: "6h" },
        { value: "12h", label: "12h" },
        { value: "24h", label: "24h" },
        { value: "10m", label: "10m" },
      ],
      dataLine: null, //图表数据
      firstLevel: 0,
      secondLevel: 0,
      thirdLevel: 0,
      formInline: {
          startTime: moment().subtract(3, "week").format("YYYY-MM-DD 00:00:00"), //开始时间
          endTime: moment().format("YYYY-MM-DD hh:mm:ss"), //结束时间
          timeType: "", //时间类型
      },
    };
  },

  computed: {},

  watch: {
    MonitorCode: {
      immediate: true,
      handler() {
        if ( this.MonitorTypeId === 1 || this.MonitorTypeId === 2 || this.MonitorTypeId === 5 ) {
          this.formInline.timeType = "";
        } else {
          this.formInline.timeType = "10m";
        }
        this.getList();
      }
    },
    MonitorTypeId() {
      if ( this.MonitorTypeId === 1 || this.MonitorTypeId === 2 || this.MonitorTypeId === 5 || this.MonitorTypeId === 6 ) {
        this.activeName = '1';
      }
    }
  },

  created() {
  },
  methods: {
     getList() {
       if(!this.MonitorCode){
         return
       }
     getMonitorDataResponseGpList(
          this.formInline.endTime,
          this.MonitorCode,
          this.MonitorTypeId,
          this.formInline.startTime,
          this.formInline.timeType,
         // this.MonitorCode === 1 || this.MonitorCode === 2 || this.MonitorCode === 5 || this.MonitorCode === 6 ? "" : this.formInline.timeType,
      ).then((res) => {
        // console.log(res, "123456");
         this.dataLine = res.parameter.list;
         this.firstLevel = res.parameter.firstLevel && res.parameter.firstLevel.toFixed(2);
        this.secondLevel = res.parameter.secondLevel && res.parameter.secondLevel.toFixed(2);
        this.thirdLevel = res.parameter.thirdLevel && res.parameter.thirdLevel.toFixed(2);
        // console.log(this.firstLevel,this.secondLevel,this.thirdLevel, "this.thirdLevel, this.thirdLevel")
        // console.log(this.dataLine, "this.dataLine");
      });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    onSubmit() {
      this.getList();
    }
  }
}
</script>

<style lang="scss" scoped>
.ChartTab{
  >>>{
    .el-input__inner {
      color: #fff !important;
    }
    .el-tabs__item.is-active {
      color: #fff;
    }
    .el-tabs__item:hover{
      color: #fff;
    }
    .el-tabs__item{
      color: #fff;
    }
    .el-tabs__active-bar{
      background-color: rgb(41, 255, 248);
    }
    .el-form-item__label,.el-tabs__item{
      color: #fff;
    }
    .el-button--primary{
      background-color: rgb(2, 156, 179);
      font-size: .06rem;
    }
  }

 .content{
   padding:  0  10px;
   width: 100%;
   height:1.5rem;
   .sub{
     margin-left: 20px;
   }
   .search{
     .el-form-item{
       margin: 0;
     }
   }
   .echarts{
     width: 100%;
     height:100%;
     .img{
       width: 100%;
       height: 100%;
     }
   }
 }
  .margin-margin-margin-left {
    margin-right: .12rem !important;
  }
}
</style>
